/**
* @note 衣带渐宽终不悔,Bug寻得人憔悴
* @author yuliang
* @description 司机端/上传回单/图片上传
* @createDate 2020/8/26
* length 最大上传张数
* lineLength 一行里图片显示的张数
* uploadImage 上传按钮
* picData 图片数据源
* mr 除去一行中最后一张，其他图片的右边距 示例:{marginRight:px2dp(7.5)*2}
*
*/

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  DeviceEventEmitter,
} from 'react-native';
import {
  px2dp,
} from '@/styles';
import { iconCircleAddGray } from '@/images';
import baseConfig from '@/config/baseConfig';

const { fileUrl } = baseConfig;
export default class UploadImgs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      picData: [],
    };
  }

  // tab切换
  tabClick = (index) => {
    this.setState({
      index: index
    });
    DeviceEventEmitter.emit('index', index);
  }

  // 上传图片回显
  listImage = () => {
    const { mr, picData, lineLength } = this.props;
    console.log('🚀🚀🚀wimi======>>>mr, picData, lineLength', picData);
    if (picData && picData.length) {
      let echoImages = picData.map((ele, index) => (
        <View style={(index + 1) % lineLength == 0 ? styles.imgs : [styles.imgs, mr]} key={index}>
          <Image style={styles.echoImg} source={{ uri: ele.type === 'video' ? ele.imageBase64 : fileUrl + ele.localId }} />
          <TouchableOpacity
            onPress={() => {
              this.delImgs(index);
            }}
            style={styles.fixedBot}
          >
            <Text style={styles.delText}>删除</Text>
          </TouchableOpacity>
        </View>
      ));
      return echoImages;
    }
  }

  // 删除图片
  delImgs = (index) => {
    // DeviceEventEmitter.emit('picDelete', index);
    this.props.picDelete && this.props.picDelete(this.props.index, index);
  }

  // 选择图片
  uploadImage=() => {
    this.props.uploadImage && this.props.uploadImage(this.props.index);
  }

  render() {
    const { length, picData } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.flex}>
          {this.listImage()}
          {/* 上传 */}
          {picData.length < length ?
            <TouchableOpacity onPress={() => { this.uploadImage(); }} opacity={0.8} style={styles.uploads}>
              <Image resizeMode='contain' style={styles.addImg} source={iconCircleAddGray} />
            </TouchableOpacity> : null}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    marginTop: 10,
    marginBottom: px2dp(24) * 2
  },
  flex: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  imgs: {
    width: px2dp(76) * 2,
    height: px2dp(76) * 2,
    marginBottom: px2dp(11.5) * 2,
    borderRadius: px2dp(4) * 2,
    position: 'relative'
  },
  // mr: {
  //   marginRight: this.props.mr,
  // },
  fixedBot: {
    position: 'absolute',
    bottom: 0,
    width: px2dp(76) * 2,
    height: px2dp(21) * 2,
    backgroundColor: '#000',
    borderBottomLeftRadius: px2dp(4) * 2,
    borderBottomRightRadius: px2dp(4) * 2,
    opacity: 0.5,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  delText: {
    color: '#fff',
    fontSize: px2dp(12) * 2
  },
  uploads: {
    width: px2dp(76) * 2,
    height: px2dp(76) * 2,
    backgroundColor: '#F5F5F5',
    marginBottom: px2dp(11.5) * 2,
    borderRadius: px2dp(4) * 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  addImg: {
    width: px2dp(22.5) * 2,
  },
  echoImg: {
    width: px2dp(76) * 2,
    height: px2dp(76) * 2,
    borderRadius: px2dp(4) * 2,
  }
});
